
<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:pou="http://primefaces.org/ui">

    <div style="overflow: auto">
        <div id="chart7" style="width: 900px; height: 400px;  float: left; margin-right: 10px;"  ></div>

    </div>
    <script>
        $(document).ready(function(){
            var line1 = [#{graphicUnoP.grapOrdenesRetenidas.pbarr1}];
            var line2 = [#{graphicUnoP.grapOrdenesRetenidas.pbarr2}];
 
            var plot2 = $.jqplot('chart7', [line1, line2], {
                title: 'Ordenes Retenidas',
                series:[ 
                    {label:"Cant. Ordenes",pointLabels: {show: true}, renderer:$.jqplot.BarRenderer},                        
                    {label:"%. Ordenes",pointLabels: {show: true},xaxis:'x2axis', yaxis:'y2axis'}                    
                ],
                axesDefaults: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                    tickOptions: {
                        angle: 30
                    }
                },                
                legend: {
                    show: true, location: 'e'
                    //,placement: 'outsideGrid'                    
                },
                axes: {
                    xaxis: {                        
                        renderer: $.jqplot.CategoryAxisRenderer
                    },
                    x2axis: {
                        renderer: $.jqplot.CategoryAxisRenderer                       
                    },
                    yaxis: {
                        autoscale:true
                    },
                    y2axis: {
                        autoscale:true
                    }
                }
            });
        });
    </script>


</ui:composition>

